<template>
  <div ref="canvasdom">
  </div>
</template>

<script setup>
import * as THREE from "three";
// 轨道控制器
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls'
// 导入动画库
import gasp from 'gsap';
// 导入dat.gui库
import * as dat from 'dat.gui';
import { onMounted } from 'vue';
onMounted(() => {
  // 渲染器、场景、相机
  // 渲染器
  const renderer = new THREE.WebGLRenderer()
  // 场景
  const scene = new THREE.Scene()
  // 相机
  const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);

  camera.position.set(0, 0, 10); // 设置相机位置

  scene.add(camera)

  // 创建几何体
  const cubeGeomentry = new THREE.BoxGeometry(1,1,1);
  // 使用纹理
  let doorImg = require('../../assets/threeJs/door.jpg');
  let doorTexture = new THREE.TextureLoader()
  doorTexture.load(doorImg);
  // 纹理的偏移
  // doorTexture.offset.x = 0.5;
  // doorTexture.offset.y = 0.5;
  // doorTexture.offset.set(0.5, 0.5);
  // 设置中心点
  // doorTexture.center.set(0.5, 0.5)
  // 纹理旋转 旋转45
  // doorTexture.rotation = Math.PI/4;
  // 纹理重复
  // doorTexture.repeat.set(2, 3)
  // 纹理重复模式
  // doorTexture.wrapS = THREE.RepeatWrapping;
  // doorTexture.wrapT = THREE.MirroredRepeatWrapping;
  console.log('纹理', doorTexture)
  // 基础材质
  // const cubeMaterial = new THREE.MeshBasicMaterial({
  //   color: 0xffff00,
  //   map: doorTexture
  // })
  // 标准网格材质
  const material = new THREE.MeshStandardMaterial({
    color: '0xffff00',
  })

  // 创建物体
  const cube = new THREE.Mesh(cubeGeomentry, material);
  //修改物体的位置
  // cube.position.set(5, 0, 0);
  // cube.position.x = 3;
  // 物体缩放
  // cube.scale.set(3, 1, 1)
  // 物体旋转
  cube.rotation.set(Math.PI/4, 0, 0, "XZY")

  scene.add(cube)

  // 灯光
  // 环境光
  // const light = new THREE.AmbientLight(0xffffff, 0.5)
  // scene.add(light)

  // 直线光源
  const directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
  directionalLight.position.set(10, 10, 10)
  scene.add( directionalLight );

  // 添加平面
  const planeGeometry = new THREE.PlaneBufferGeometry(1,1);
  const plane = new THREE.Mesh(planeGeometry, material)
  plane.position.set(3, 0, 0);
  planeGeometry.setAttribute(
    'uv2',
    new THREE.BufferAttribute(planeGeometry.attributes.uv.array, 2)
  )
  

  scene.add(plane)
  function datgui () {
     const gui = new dat.GUI();
    gui.add(cube.position, "x").min(0).max(5).step(0.01).name('移动X轴')
    .onChange((value) => {
      console.log('值被修改：', value)
    }).onFinishChange((value) => {
      console.log('完全停下来', value)
    });
    // 修改物体的颜色
    const params = {
      color: '#ffff00',
      fn: () => {
        gasp.to(cube.position, {x:5, duration: 2, yoyo: true, repeat: -1})
      }
    }
    gui.addColor(params, 'color').onChange((value) => {
      console.log('值被修改：', value);
      cube.material.color.set(value)
    });
    gui.add(cube, 'visible').name('是否显示')
    // 设置按钮点击触发某个事件
    gui.add(params, 'fn').name("立方体运动")
    let folder = gui.addFolder("设置立方体")
    folder.add(cube.material, 'wireframe')
  }
  datgui()


  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);
  renderer.render(scene, camera)

  // 创建轨道控制器
  const controls = new OrbitControls(camera, renderer.domElement)
  // 控制器阻尼
  controls.enableDamping = true

  // 添加坐标轴辅助器
  const axesHelper = new THREE.AxesHelper(5);
  scene.add(axesHelper)

  console.log(cube)
  console.log(cubeGeomentry)

  //  设置时钟
  // const clock = new THREE.Clock();
  // console.log(gasp);

  // 设置动画库
  // let anima = gasp.to(
  //   cube.position,
  //   {
  //     x:5, // x轴移动5
  //     duration: 5, // 花费市场
  //     ease: 'power1.inOut', // 运动频率
  //     repeat: 2, // 重复次数 如果无线循环是-1
  //     yoyo: true, // 往返
  //     onComplete: () => {
  //       console.log('动画完成')
  //     },
  //     onStart: () => {
  //       console.log('动画开始')
  //     }
  //   }
  // )
  // gasp.to(
  //   cube.rotation,
  //   {x: 2*Math.PI, duration: 5, ease: 'power1.inOut',
  //   repeat: 2, // 重复次数 如果无线循环是-1
  //   yoyo: true})
  // 双击暂停动画开始动画
  // window.addEventListener('dblclick', () => {
  //   if (anima.isActive()) {
  //     anima.pause()
  //   } else {
  //     anima.resume()
  //   }
  // })
  // 双击全屏
  window.addEventListener('dblclick', () => {
    const fullScreenElement = document.fullscreenElement;
    if (fullScreenElement) {
      document.exitFullscreen();      
    } else {
      renderer.domElement.requestFullscreen();
    }
  })


  function animation () {
    // let time = clock.getElapsedTime();
    // let deltaTime = clock.getDelta();
    // console.log(deltaTime)
    // cube.rotation.x += 0.01;
    // if (cube.position.x > 5) {
    //   cube.position.x=0;
    //   cube.position.y=5;
    // } else {
    //   cube.position.x+=0.01;
    // }
    // if (cube.position.y > 5) {
    //   cube.position.y = 0;
    //   cube.position.z+=0.01;
    // }
    // let t= time % 5; // 秒
    // cube.position.x = t*1;
    // if (cube.position.x > 5) {
    //   cube.position.x = 0;
    // }
    controls.update()
    renderer.render(scene, camera)
    requestAnimationFrame(animation)
  }
  animation()

  window.onresize = function () {
    // 全屏情况下：设置观察范围长宽比aspect为窗口宽高比 更新摄像头
    camera.aspect = window.innerWidth / window.innerHeight;
    // 渲染器执行render方法的时候会读取相机对象的投影矩阵属性projectionMatrix
    // 但是不会每渲染一帧，就通过相机的属性计算投影矩阵(节约计算资源)
    // 如果相机的一些属性发生了变化，需要执行updateProjectionMatrix ()方法更新相机的投影矩阵
    camera.updateProjectionMatrix();
    // 更新渲染器
    renderer.setSize(window.innerWidth, window.innerHeight)
    // 设置渲染器的像素比
    renderer.setPixelRatio(window.devicePixelRatio)
  }

})
</script>

<style>
body{
  background-color: skyblue;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
</style>
